<template>
    <div>
        <h1>{{ msg }}</h1>

        <!-- <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button @click="count++">count is: {{ count }}</button>

  <p ref="desc"></p>

  <model-button></model-button> -->

        <button @click="handleClick">触发emit</button>
        <comp></comp>

        <button @click="$emit('update:visible', true)">修改visible的值</button>


        <!-- 编程方式发送和监听事件-start -->
        <button @click="sendMsg">emit event</button>
        <!-- 编程方式发送和监听事件-end -->
    </div>
</template>

<script setup>
import ModelButton from "./ModelButton.vue";
import mitt from 'mitt'
const emitter = mitt()
import {
    defineProps,
    defineEmit,
    ref,
    reactive,
    toRefs,
    watch,
    useContext,
} from "vue";
defineProps({
    msg: String,
    visible: {
        type: Boolean,
        default: false,
    },
});

// const state = reactive({ count: 0 })
// let {count} = toRefs(state)

// const desc = ref(null)
// watch(count, (val, oldVal) => {
//   console.log(desc)
//   const p = desc.value
//   p.textContent = `counter change <br> from ${oldVal} tor ${val}`
// })
const emit = defineEmit(["foo-click"]);

const handleClick = () => {
    emit("foo-click");
    console.log("子组件触发");
    // emit('foo-click')
    // ctx.emit('foo-click')
};
const sendMsg = () => {
    emitter.emit('someEvent', 'foooo')
}
</script>

<style scoped>
a {
    color: #42b983;
}
</style>
